<template>
  <div ref="acrossPillarEcharts" :style="{ width: '100%', height: height }"></div>
</template>

<script>
export default {
  props: {
		height: {
			type: String,
			default: 'calc(100% - 42px)'
		},
		left: {
			type: String,
			default: "60px"
		},
		right: {
			type: String,
			default: "20px"
		},
		bottom:{
			type: String,
			default: "20px"
		},
		top: {
			type: String,
			default: "50px"
		},
    yAxisData: {
      type: Array,
      default() {
        return [];
      },
    },
    yAxisName: {
      type:String,
      default:'次数'
    },
    arrData: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
			acrossPillarEcharts: '',
			options: {}
    };
  },
	watch: {
		allLatlngs: {
			handler(val){
				this.$nextTick(() => {
					if(this.arrData.length){
						this.options.series = this.arrData
						this.options.grid.left = this.left
						this.options.grid.right = this.right
						this.options.grid.bottom = this.bottom
						this.options.grid.top = this.top
						if(this.yAxisData.length){
							this.options.yAxis.data = this.yAxisData
						}
						if(this.acrossPillarEcharts){
							this.acrossPillarEcharts.setOption(this.options);
						}
					}
				})
			},
			immediate: true
		},
	},
	computed: {
		allLatlngs () {
			const { yAxisData,yAxisName,arrData } = this
			return {
				yAxisData,
				yAxisName,
				arrData
			}
		}
	},
  methods: {
    init() {
      this.acrossPillarEcharts = this.$echarts.init(
        this.$refs.acrossPillarEcharts
      ); //这里是为了获得容器所在位置
      this.acrossPillarEcharts.resize()
      this.options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          }
        },
        grid: {
          left: "60px",
          right: "20px",
          bottom: "20px",
					top: '50px'
        },
        xAxis: {
          type: "value",
          splitLine: {
            show: false
          },
          axisTick:{
            alignWithLabel:true,
            inside:true
          },
					axisLabel: {
					  textStyle: {
					    color: "#FFF",
					  },
					},
        },
        yAxis: {
          name:this.yAxisName,
          nameLocation:'end',
          nameTextStyle:{
            padding:2,
            color:'#00fbfc'
          },
          type: "category",
          data: this.yAxisData,
          axisTick: {
            show:false,
            alignWithLabel: true,
          },
          axisLabel: {
            textStyle: {
              color: "#FFF",
							fontSize: 10
            },
          },
        },
        animationDuration: 2500,
        series: [],
      }
    },
  },
  mounted() {
    this.$nextTick(()=>{
      this.init();
      window.addEventListener('resize',this.init,20)
    })
  },
  beforeDestroy(){
    window.removeEventListener('resize',this.init)
  }
};
</script>

<style>
</style>